<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000">详情</z-nav-bar>
		</view>
		<view v-if="articleInfo">
			<view>
				<u-swiper :list="articleInfo.bannerImageList" indicator indicatorMode="line" circular height="500"></u-swiper>
			</view>
			
			<view class="u-p-60 bg-white">
				<view class="u-flex">
					<view>
						<u-avatar :src="articleInfo.articleHeader" size="50"></u-avatar>
					</view>
					<view class="u-m-l-30 u-flex" style="align-items: flex-end; height: 80rpx;">
						<view>
							<text class="">{{articleInfo.articleAuthor}}</text>
						</view>
						<view>
							<!-- <text class="u-m-l-30" v-if="articleInfo.updateTime">{{formatDate(articleInfo.updateTime)}}</text>
							<text class="u-m-l-30" v-else>{{formatDate(articleInfo.createTime)}}</text> -->
							<text class="u-m-l-30">{{formatDate(articleInfo.createTime)}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-p-l-60 u-p-r-60 u-p-b-60 bg-white">
				<u-parse :content="articleInfo.content"></u-parse>
			</view>
			
			<!-- <view class="u-p-l-60 u-p-r-60 u-p-t-40 u-p-b-40 u-m-t-30 bg-white" v-for="(item, index) in 3" :key="index">
				<view class="u-flex">
					<view>
						<u-avatar :src="src" size="34"></u-avatar>
					</view>
					<view class="u-m-l-30 u-flex">
						<view>
							<text class="u-font-24">李四</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-20">
					<text >三月, 沐浴和风中, 耳边惊蛰声, 你与我拥抱的便是整个仲春了</text>
				</view>
				<view class="u-flex u-m-t-30">
					<view class="u-flex-1">
						<text style="opacity: 0.5;" class="u-font-24">5小时前</text>
					</view>
					<view class="u-flex-1 u-flex u-flex-end" >
						<view class="u-flex">
							<u-icon name="chat" size="24"></u-icon>
							<text style="opacity: 0.5;">10</text>
						</view>
						<view class="u-m-l-30 u-flex">
							<u-icon name="heart" size="24"></u-icon>
							<text style="opacity: 0.5;">20</text>
						</view>
					</view>
				</view>
			</view> -->
			
		</view>
	</z-paging>
</template>

<script>
	import {registerTypeEnum} from '@/common/const.js'
	import {getArticleDetail} from '@/api/article.js'
	import dayjs from 'dayjs'
	import {mapGetters} from 'vuex'
	
	export default{
		data(){
			return{
				registerTypeEnum,
				src:'',
				bannerList: [],
				requestParams:{},
				articleInfo:null
			}
		},
		onLoad(e) {
			this.init(e)
		},
		onShareAppMessage(res) {
			let invitedCode = this.userInfo.invitedCode
			let type = 'articleDetail'
			let params = encodeURIComponent(`articleId=${this.requestParams.articleId}`)
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend}&params=${params}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		onShareTimeline(res){
			let invitedCode = this.userInfo.invitedCode
			let type = 'articleDetail'
			let params = encodeURIComponent(`articleId=${this.requestParams.articleId}`)
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend_circle}&params=${params}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		computed:{
			...mapGetters(['isLogin','userInfo']),
		},
		methods:{
			init(e){
				this.requestParams.articleId = e.articleId
				this.reload()
				this.shareMenuStatus()
			},
			
			/**
			 * 判断是否可以分享
			 */
			shareMenuStatus(){
				if(this.isLogin){
					console.log("打开分享")
					uni.showShareMenu({
						menus: ['shareAppMessage', 'shareTimeline']
					})
				} else {
					console.log("关闭分享")
					uni.hideShareMenu({
						
					})
				}
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			queryList(){
				this.bannerList = []
				getArticleDetail(this.requestParams).then(res=>{
					let data = res.data
					let imageList = JSON.parse(data.articleImages)
					let images = []
					imageList.forEach(item=>{
						images.push(item.materialUrl)
					})
					// 获取sku轮播图
					if(!data.hasOwnProperty('bannerImageList')){
						this.$set(data, 'bannerImageList', images.slice(1))
					} else {
						data.bannerImageList = images.slice(1)
					}
					if(data.articleHeader){
						let headerList = JSON.parse(data.articleHeader);
						if(headerList.length > 0){
							data.articleHeader = headerList[0].materialUrl
						}
					}
					this.articleInfo = data
					this.$refs.paging.complete([]);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
				
			},
			
			/**
			 * 格式化优惠券时间
			 */
			formatDate(val){
				return dayjs(val).format('YYYY.MM.DD')
			},
			
		}
	}
</script>

<style>
</style>